<template>
	<view>
		<uni-popup ref="authPopup">
			<view class="wanl-auth-popup bg-white radius-bock text-center">
				<view class="avatar">
					<image :src="$wanlshop.appstc('/common/logo.png')" mode="aspectFill"></image>
				</view>
				<view class="margin-tb-lg text-sm wanl-gray">
					亲，首次登录系统，需要获取您的昵称、头像进一步完善资料！
				</view>
				<button type="primary" class="cu-btn sl radius-bock bg-no margin-bottom"
					@tap="wechatLogin">绑定微信</button>
				<button class="cu-btn sl radius-bock" @tap="refuseUserInfo">拒绝</button>

			</view>
		</uni-popup>

	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				},
				pageroute: '',
				provider: null,
				timer: null,
				token: null,
				canIUseGetUserProfile: false // 1.0.7 升级
			};
		},
		onLoad(option) {
			this.pageroute = option.url;
			this.token = option.token;
			if (option.platform == 'mp_weixin' || option.platform == 'app_weixin') {
				this.provider = 'weixin'
			} else if (option.platform == 'mp_qq' || option.platform == 'app_qq') {
				this.provider = 'qq'
			} else if (option.platform == 'app_weibo') {
				this.provider = 'sinaweibo'
			} else if (option.platform == 'app_xiaomi') {
				this.provider = 'xiaomi'
			} else if (option.platform == 'apple') {
				this.provider = 'apple'
			}
			// 1.0.7 升级
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			} else {
				this.getUserInfo()
			}

			// 获取用户信息
			// #ifdef MP-WEIXIN || MP-QQ
			setTimeout(() => {
				// 获取用户信息
				this.$refs.authPopup.open();
			}, 100);
			// #endif
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			//微信小程序登录
			wechatLogin() {
				// this.$loading();
				// this.$store.commit("logout");
				uni.login({
					success: loginRes => {

						console.log(loginRes)

						if (loginRes.code) {

							uni.getUserInfo({

								withCredentials: true,

								success: info => {

									console.log(info)

									uni.request({
										url: "/api/login/wechatBind",
										data: {
											code: loginRes.code,
											encrypted_data: info.encryptedData,
											iv: info.iv,
											raw_data: info.rawData,
											signature: info.signature,
											token: uni.getStorageSync("wanlshop:user")
												.token
										},
										method: "POST",
										success: (res) => {
											uni.showToast({
												title: '绑定成功'
											});
											this.$refs.authPopup.close();
											this.$wanlshop.back(1);
										},
									});

								},
								fail: res => {

									console.log(res)

									if (res.errMsg == 'getUserInfo:cancel' || res.errMsg ==
										'getUserInfo:fail auth deny') {
											
											uni.showToast({
												title: '请删除此小程序重新授权'
											});
											
										// this.$refs.uToast.show({
										// 	title: '请删除此小程序重新授权',
										// 	type: 'error'
										// });
									}
								}
							});
						}
					}
				});
			},
			getUserInfo() {
				uni.showLoading({
					title: '拉取授权中..'
				});
				this.$refs.authPopup.close();
				if (this.timer) {
					clearInterval(this.timer);
				} else {
					// 1.0.7 升级
					this.timer = setInterval(() => {
						this.setUserInfo();
					}, 1000);
				}
			},
			// 1.0.7 升级
			getUserProfile() {
				uni.showLoading({
					title: '拉取授权中..'
				});
				this.$refs.authPopup.close();
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo;
						uni.hideLoading();
					}
				})
			},
			// 获取用户信息
			setUserInfo() {
				uni.getUserInfo({
					provider: this.provider,
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo;
						uni.hideLoading();
					}
				});
				// 如果存在，终止进程
				if (this.userInfo.nickName) {
					if (this.timer) {
						clearInterval(this.timer);
						this.timer = null;
					}
				}
			},
			async formSubmit(e) {
				//定义表单规则
				let rule = [{
					name: 'nickName',
					checkType: 'string',
					checkRule: "1,20",
					errorMsg: '用户名应该1-10字符之间'
				}];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					await uni.request({
						url: '/wanlshop/user/perfect',
						method: 'POST',
						data: {
							token: this.token,
							avatarUrl: this.userInfo.avatarUrl,
							nickName: this.userInfo.nickName,
							gender: this.userInfo.gender
						},
						success: res => {
							this.$store.dispatch('user/login', res.data);
							this.$store.dispatch('cart/login');
							// this.$store.dispatch('chat/get');
							uni.reLaunch({
								url: decodeURIComponent(this.pageroute)
							});
						}
					});
				} else {
					this.$wanlshop.msg('请填写用户名');
				}
			},
			refuseUserInfo() {
				this.$wanlshop.back(1);
			},
		}
	};
</script>

<style>
	@import url("auth.css");

	.avatar {
		display: flex;
		justify-content: center;
		flex: 1;
		margin-bottom: 80rpx;
	}

	.avatar image {
		border-radius: 9999px;
		overflow: hidden;
		height: 200rpx;
		width: 200rpx;
	}

	.wanl-auth-popup {
		position: fixed;
		right: 60rpx;
		left: 60rpx;
		top: 100rpx;
		bottom: 200rpx;
		padding: 50rpx;
	}

	.wanl-auth-popup .avatar {
		margin-top: 80rpx;
		margin-bottom: 100rpx;
	}

	.wanl-auth-popup .cu-btn {
		height: 90rpx;
		width: 100%;
	}
</style>
